<template>
	<view class="page-index">
		<view class="hd bx">
			<view class="disbetween">
				<view class="">
					<span class="garys">就诊人：</span>
					<span style="font-weight: bold;">胡越南</span>
				</view>
				<view class="dis" style="align-items: center;" @click="jzrshow=true">
					<u-icon name="/static/icon/qh.png" size="45"></u-icon>
					<span class="garys">切换</span>
				</view>
			</view>
			<view class="" v-if="jzrshow">
				<u-select v-model="jzrshow" :list="list" title="切换就诊人"></u-select>
			</view>
		</view>
		<view class="">

			<u-tabs :list="tablist" :is-scroll="false" v-model="current" @change="change"
				:bar-width="screenWidth"></u-tabs>
		</view>
		<view class="bd" style="">
			<view class="" v-if="jflist.length>0">
				<view class="" v-if="index==0">
					<uni-transition :duration="tim" ref="ani" mode-class="slide-right" :show="index==0">
						<u-checkbox-group @change="checkboxGroupChange">
							<view class="" style="width: 100%; padding: 30rpx;">

								<view class="ddlb" style="display: flex;flex-direction: column;"
									v-for="(item,index) in jflist" :key="index">
									<view class="garys p10"
										style="font-size: 25rpx;width: 100%;display: flex;justify-content: space-between;padding-bottom: 20rpx">
										<span>{{item.time}}</span>
										<span>未支付</span>
									</view>
									<view class="disbetween">
										<view class="dis">
											<view class="dis" style="height: 100%; display: flex;align-items: center;">
												<u-checkbox shape="circle" @change="checkboxChange"
													v-model="item.checked" :name="item.ks"></u-checkbox>
											</view>
											<view class="" style="display: flex;flex-direction: column;">
												<view class="" style="font-weight: bold;margin-bottom: 5rpx;">
													<span>{{item.ks}}</span>
												</view>
												<view class="" style="font-size: 25rpx;margin-top: 5rpx;">
													<span class="garys">订单号：{{item.djh}}</span>
												</view>
											</view>
										</view>
										<view class="dis" style="align-items: center;">
											<span style="color: #f17d24;">{{item.money}}</span>
										</view>
									</view>
								</view>
							</view>
							<view class="" v-if="qx==0" style="padding:20rpx 30rpx;" @click="checkedAll">
								全选
							</view>
							<view class="" v-if="qx==1" style="padding:20rpx 30rpx;" @click="checkedAllqx">
								全不选
							</view>
						</u-checkbox-group>

					</uni-transition>
				</view>
				<view class="" v-else>
					<uni-transition :duration="tim" ref="ani" mode-class="slide-left" :show="index==1">
						<view class="" style="padding: 30rpx;">
							<view class="ddlb" style="display: flex;flex-direction: column;"
								v-for="(item,index) in jflist" :key="index">
								<view class="garys p10"
									style="font-size: 25rpx;width: 100%;display: flex;justify-content: space-between;padding-bottom: 20rpx">
									<span>{{item.time}}</span>
									<span>已支付</span>
								</view>
								<view class="disbetween">
									<view class="dis">
										<view class="dis" style="height: 100%; display: flex;align-items: center;">
											<u-icon name="/static/icon/wxzz.png" size="65"></u-icon>
											&ensp;
										</view>
										<view class="" style="display: flex;flex-direction: column;">
											<view class="" style="font-weight: bold;margin-bottom: 5rpx;">
												<span>{{item.ks}}</span>
											</view>
											<view class="" style="font-size: 25rpx;margin-top: 5rpx;">
												<span class="garys">订单号：{{item.djh}}</span>
											</view>
										</view>
									</view>
									<view class="dis" style="align-items: center;">
										<span style="color: #f17d24;">{{item.money}}</span>
									</view>
								</view>
							</view>
						</view>
					</uni-transition>
				</view>
			</view>
			<view class="" style="padding-top: 100rpx;" v-else>
				<view class="" v-if="index==0">
					<uni-transition :duration="tim" ref="ani" mode-class="slide-right" :show="index==0">
						<u-empty text="暂无未缴费订单" mode="order"></u-empty></uni-transition>
				</view>
				<view class="" v-else-if="index==1">
					<uni-transition :duration="tim" ref="ani" mode-class="slide-left" :show="index==1">
						<u-empty text="暂无已缴费订单" mode="order"></u-empty></uni-transition>
				</view>
				<view class="" v-else>
					<u-empty text="暂无订单" mode="order"></u-empty>
				</view>
			</view>
		</view>
		<uni-transition :duration="tim" class="ft" ref="ani" mode-class="fade" :show="index==0">
			<!-- <view class="" v-if="index==0"> -->
			<view class="pay">
				<view class="pay-label">总费用：</view>
				<view class="pay-value">¥{{price}}</view>
			</view>
			<view class="btn">去支付</view>
			<!-- </view> -->
		</uni-transition>
	</view>
</template>

<script>
	export default {
		name: 'PageIndex',
		data() {
			return {
				lista: [{
						name: '待发货',
						num: 10
					},
					{
						name: '待付款'
					},
					{
						name: '待评价',
						num: 15
					}
				],
				currenta: 1,
				qx: 1,
				tim: 400,
				jflist: [{
						ks: '方便门诊',
						time: '2024-10-11 9:39:39',
						money: 188,
						djh: '21-4566665469999999999999',
						checked: true
					},
					{
						ks: '方便门诊',
						time: '2024-10-11 9:39:39',
						money: 188,
						djh: '21-4566665469999999999999',
						checked: true
					},
					{
						ks: '方便门诊',
						time: '2024-10-11 9:39:39',
						money: 188,
						djh: '21-4566665469999999999999',
						checked: true
					},
					{
						ks: '方便门诊',
						time: '2024-10-11 9:39:39',
						money: 188,
						djh: '21-4566665469999999999999',
						checked: true
					},
					{
						ks: '方便门诊',
						time: '2024-10-11 9:39:39',
						money: 188,
						djh: '21-4566665469999999999999',
						checked: true
					}
				],
				jzrshow: false,
				list: [{
						value: '1',
						label: '小吴'
					},
					{
						value: '2',
						label: '小越'
					}
				],
				tablist: [{
					name: '未缴费'
				}, {
					name: '已缴费'
				}],
				current: 0,
				index: 0,
				price: 0,
				screenWidth: 300
			}
		},
		created() {
			this.getwidth()
		},
		onLoad: function(option) {
			this.pricemoney()

		},
		methods: {
			getwidth() {
				const systemInfo = uni.getSystemInfoSync();
				// 计算屏幕宽度
				const screenWidth = systemInfo.windowWidth;
				this.screenWidth = screenWidth
				console.log("屏幕宽度为：" + screenWidth + "px");
			},
			pricemoney() {
				//执行完刷新
				uni.showLoading({
					title: '正在计算价格',
					mask: true
				});
				let item = this.jflist
				console.log("item", item)
				let sum = 0
				for (let i = 0; i < item.length; i++) {
					if (item[i].checked) {
						sum += item[i].money
					}
				}
				this.price = sum
				console.log("sum", sum)
				uni.hideLoading();
			},
			checkboxChange(e) {
				console.log(e);
				// this.pricemoney()
			},
			checkboxGroupChange(e) {
				console.log("checkbox", e);
				this.pricemoney()
			},
			// 全选
			checkedAll() {
				this.jflist.map(val => {
					val.checked = true;
				})
				this.pricemoney()
				this.qx = 1
			},
			checkedAllqx() {
				this.jflist.map(val => {
					val.checked = false;
				})
				this.pricemoney()
				this.qx = 0
			},
			change(index) {
				this.index = index
				console.log("this.index", this.index);
			},
			handleActionsheet() {
				this.actionsheetVisible = !this.actionsheetVisible;
			}
		}
	}
</script>

<style scoped>
	@import './index.css';
	@import './actionsheet.css';
</style>